<script setup>
defineProps({
  list: {
    type: Array,
    required: true
  }
})
</script>

<template>
  <div class="project-list-wrap">
    <div class="project-item"
         v-for="(item,index) in list"
         :key="index">
      <el-descriptions
          class="margin-top"
          :column="3"
          border
          :title="item.name"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <span>业务</span>
            </div>
          </template>
          <span>{{ item.yewu_name }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <span>产品</span>
            </div>
          </template>
          <span>{{ item.chanpin_name }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <span>开始日期</span>
            </div>
          </template>
          <span>{{ item.start_date }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">

              <span>结束日期</span>
            </div>
          </template>
          <span>{{ item.end_date }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <span>备注</span>
            </div>
          </template>
          <span>{{ item.content || '无' }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div class="project-date w-100">
        <div class="date-item start">
          <span>{{ item.startDate }}</span>
        </div>
        <div class="chevron-wrap">
          <el-tag :type="item.tagStatus">{{ item.dayText }}</el-tag>
          <div class="icon-wrap">
            <svg-icon class="chevron" icon="arrow-right"/>
          </div>
        </div>
        <div class="date-item end">
          <span>{{ item.endDate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.project-list-wrap {
  .project-item {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    padding: 16px;
    border-radius: 4px;
    overflow: hidden;

    .project-date {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;

      .chevron-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        margin: 0 16px;

        .icon-wrap {
          font-size: 62px;
        }

        .days-wrap {
          padding: 8px 16px;
          box-sizing: border-box;
          font-size: 22px;
          color: #FFF;
          border-radius: 8px;
          background: #3c9cff;

          &.status-0 {
            background: #5ac725;
          }

          &.status-1 {
            background: #f56c6c;
          }

          &.status-2 {
            background: #3c9cff;
          }

        }
      }

      .date-item {
        width: 88px;
        height: 88px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: #3c9cff;
        color: #FFF;
        font-size: 32px;
        font-weight: bold;

        &.active {
          // background: #f56c6c;
        }

        &.start {
          background: #5ac725;
        }
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

</style>
